<template>
  <div :id="id" :opiton="opiton"></div>
</template>

<script>
export default {
  name: 'RoseTypeChart',
  props: ['id', 'opiton'],
  data () {
    return {
      chartRoseType: null
    }
  },
  watch: {
    opiton: {
      handler (newValue, oldValue) {
        this.drawRoseType(this.id, newValue)
      },
      deep: true
    }
  },
  created () {
  },
  mounted () {
    this.drawRoseType(this.id, this.opiton)   
  },
  methods: {
    // 自定义echarts方法
    drawRoseType (id, opiton) {
      // eslint-disable-next-line no-unused-vars
      const myChart = document.getElementById(id)
      this.chartRoseType = this.$echarts.init(myChart)
      this.chartRoseType.setOption(opiton)
      this.chartRoseType.resize()
      window.addEventListener('resize', () => {
        this.chartRoseType.resize()
      })
    }
  },
  beforeDestroy () {
    if (this.chartRoseType) {
      this.chartRoseType.clear()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
